<template>
    <div class="pro-service">
        <div class="pro-service-title">{{title}}</div>
        <div class="pro-service-img">
          <img :src="selfImg">
        </div>
        <div class="pro-service-text" v-html="descript">
          
        </div>
        <div class="pro-service-item">
          <div v-for="(item, key) in serviceData" :key="key+'serviceData'">
            <div v-for="(i, k) in item[0]" :key=k class="service-item" :class="item[1]">
              <i class="icon-uniE946"></i> {{i.descript}}
            </div>
          </div>
        </div>
    </div>
</template>

<script>

export default {
  name: 'proService',
  data() {
    return{
      colorList: ['red','blue','orange']
    }
  },
  props: {
    title: String,
    descript: String,
    selfImg: String,
    serviceitemList: {
      type: Array,
      required: true
    }
  },
  computed: {
      //项目服务过滤
      serviceData : function() {
          let res=[];
          for(let i=0,k=0;i<this.serviceitemList.length;i+=2){
              let interim=[this.serviceitemList.slice(i,i+2),this.colorList[k]]
              res.push(interim)
              if(k<this.colorList.length-1){
                k++
              }else{
                k=0
              }
          }
          return res;
      }
  },
  mounted: function () {
  },
  methods: {
    
  }
}
</script>

<style lang="stylus" scoped>
.pro-service{
  background:rgba(255,255,255,1);
  box-shadow:0px 1px 2px 0px rgba(0,0,0,0.1);
  margin-bottom: 20px;
}
.pro-service-title{
  box-sizing: border-box;
  font-size:16px;
  color:rgba(30,30,30,1);
  padding-left: 30px;
  line-height:58px;
  border-bottom: 1px solid rgba(238,238,238,1);
}
.pro-service-img{
  padding: 40px 30px;
  img{
    width: 100%;
    height: 174px;
  }
}
.pro-service-text{
  padding: 0 30px;
  font-size:14px;
  color:rgba(30,30,30,1);
  line-height:34px;
}
.pro-service-item{
  padding: 60px 30px;
  >div{
    margin-bottom: 40px;
  }
  >div:last-child{
    margin-bottom: 0;
  }
}
.service-item{
  position: relative;
  width: 48%;
  display: inline-block;
  font-size:14px;
  height: 58px;
  line-height: 58px;
  text-align: center;
  .icon-uniE946{
    position: absolute;
    top: 0;
    left: 20px;
    font-size: 24px;  
  }  
}
.service-item:nth-child(odd){
  margin-right: 4%;
}
.red{
  background:rgba(255,243,246,1);
  color:rgba(255,39,88,1); 
}
.blue{
  background:rgba(242,245,255,1);
  color:rgba(20,87,253,1);
}
.orange{
  background:rgba(255,243,242,1);
  color:rgba(255,98,82,1);  
}

</style>
